<template>
	<view class="content">
		<view class="top-box border-box">
			<view class="title">
				{{title}}
			</view>
			<view class="sum">
				￥{{getSum()}}
			</view>
			<view class="trade-info">
				<view class="">
					订单号:2401204480322814672
				</view>
			</view>
		</view>
		<view class="list-item border-box">
			<view class="item-name">
				<u-icon name="youhuiquan" custom-prefix="custom-icon" color="#666" style="padding-right: 30rpx;"
					size="60"></u-icon>
				优惠金额
			</view>
			<view class="item-content">
				5元代金券〉
			</view>
		</view>
		<view class="list-item border-box">
			<view class="item-name">
				<u-icon name="ticket_sub" custom-prefix="custom-icon" color="#666" style="padding-right: 30rpx;"
					size="60"></u-icon>
				余额抵扣
			</view>
			<view class="item-content">
				<u-switch v-model="checked" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view class="list-item border-box">
			<view class="item-name">
				<u-icon name="fukuan" custom-prefix="custom-icon" color="#666" style="padding-right: 30rpx;"
					size="60"></u-icon>
				实付金额
			</view>
			<view class="item-content">
				<view class="sum main-color">
					￥{{getSum()}}
				</view>
			</view>
		</view>
		<view style="width: 80%; padding-top: 30vh;">
			<u-button type="warning" @click="goto()">去支付</u-button>
		</view>
		<view class="foot">
			<foot-box></foot-box>
		</view>
		<!-- <u-image width="300rpx" height="300rpx" :src="src[0]"></u-image> -->
	</view>
</template>

<script setup name='OrderConfirm'>
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import footBox from '@/components/foot-box/index.vue'
	import request from '@/common/request.js'
	import {
		roundAndPad
	} from '@/common/common.js'
	const {
		proxy
	} = getCurrentInstance()

	const title = ref('商户名')
	const checked = ref(false)
	const payMap = ref({
		weixin: '微信',
		zhifubao: '支付宝',
		yinlian: '银联',
	})
	const sum = ref('2000')

	onLoad((options) => {})

	function goto() {
		proxy.$System.goTo('/pages/order-payment/index')
	}

	function getSum() {
		return roundAndPad(sum.value, 2)
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		width: 100%;
	}

	.top-box {
		width: 100%;
		text-align: center;
	}

	.sum {
		font-size: 64rpx;
		font-weight: 700;
	}

	.title {
		color: #666;
		padding: 50rpx 0 30rpx;
		font-size: 36rpx;
	}

	.trade-info {
		color: #666;
		padding: 20rpx 0;
		width: 100%;
		line-height: 42rpx;
		margin: auto;
		text-align: center;

	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.item-name {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.item-content {
		display: flex;
		align-items: center;
	}

	.foot {
		padding-top: 80rpx;
	}
</style>